<template>
	<div id="typeIn">
		<el-form :model="tform" :rules="rules" ref="ruleFormRef" label-width="auto">
			<el-row>
				<el-col :span="24">
					<el-form-item label="物品名称" prop="name">
						<el-input
							v-model="tform.name"
							placeholder="请输入品牌和名称(5-15个字)"
							maxlength="15"
							minLength="5"
							clearable />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="department">
						<el-select
							v-model="tform.department"
							clearable
							placeholder="请选择"
							style="width: 240px">
							<el-option
								v-for="item in departments"
								:key="item.id"
								:label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="物品类型" prop="type">
						<el-select
							v-model="tform.type"
							clearable
							placeholder="请选择"
							style="width: 240px">
							<el-option
								v-for="item in types"
								:key="item.id"
								:label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="保管人" prop="preserver">
						<el-input
							v-model="tform.preserver"
							placeholder="请输入"
							maxlength="4"
							minLength="2"
							clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="物品编号" prop="num">
						<el-input
							class="sysNum"
							type="button"
							v-model="tform.num"
							@click="getNub" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="物品状态" prop="status">
						<el-select
							v-model="tform.status"
							clearable
							placeholder="请选择"
							style="width: 240px">
							<el-option
								v-for="item in status"
								:key="item.id"
								:label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="物品价格" prop="price">
						<el-input v-model="tform.price" placeholder="请输入 单位(元)" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item label="采购事由" prop="explain">
						<el-input
							v-model="tform.explain"
							type="textarea"
							clearable
							resize="none"
							minLength="5"
							maxlength="200"
							show-word-limit
							:rows="5"
							placeholder="请说明用途(5-200字)" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="" prop="imgUrl">
						<div class="upload" v-if="tform.imgUrl">
							<img :src="tform.imgUrl" />
							<Delete class="del" @click="deleteIcon" />
						</div>
						<div class="upload" v-else>
							<el-upload
								action="/api/upload"
								:show-file-list="false"
								:on-success="uploadSuccess"
								:on-error="handleError">
								<el-icon><Plus /></el-icon>
							</el-upload>
						</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
	<el-row style="padding-top: 1.5rem; text-align: center">
		<el-col :span="24">
			<el-button @click="submitForm(ruleFormRef)">保 存</el-button>
		</el-col>
	</el-row>
</template>

<script setup>
	import { reactive, ref } from "vue";
	import { getObj, delObj } from "@/api";
	import { ElMessage } from "element-plus";

	const tform = reactive({
		name: "",
		type: "",
		num: "点击生成编号",
		department: "",
		preserver: "",
		status: 1,
		price: "",
		initIMG: "",
		explain: "",
		imgUrl: "",
	});
	const ruleFormRef = ref();
	const rules = reactive({
		name: [
			{
				required: true,
				message: "请输入",
				trigger: "blur",
			},
			{ min: 5, max: 15, message: "请输入5-15个字", trigger: "blur" },
		],
		type: [
			{
				required: true,
				message: "请选择",
				trigger: "change",
			},
		],
		status: [
			{
				required: true,
				message: "请选择",
				trigger: "change",
			},
		],
		department: [
			{
				required: true,
				message: "请选择",
				trigger: "change",
			},
		],
		preserver: [
			{ required: true, message: "请输入", trigger: "blur" },
			{ min: 2, max: 4, message: "请输入2-4个字", trigger: "blur" },
		],
		num: [{ required: true, message: "点击获取编号", trigger: "submit" }],
		price: [
			{ required: true, message: "请输入", trigger: "blur" },
			{ min: 1, max: 6, message: "最多6位数", trigger: "blur" },
		],
		explain: [
			{ required: true, message: "请输入", trigger: "blur" },
			{ min: 5, max: 200, message: "请输入3-4个字", trigger: "blur" },
		],
		imgUrl: [{ required: true, message: "请上传图片", trigger: "submit" }],
	});

	const types = [
		{ id: 1, name: "电脑配件" },
		{ id: 2, name: "手机配件" },
		{ id: 3, name: "办公用品" },
		{ id: 4, name: "植保工具" },
		{ id: 5, name: "产线工具" },
		{ id: 6, name: "交通工具" },
	];
	const status = [{ id: 1, name: "正常" }];
	const departments = [
		{ id: 1, name: "总经办" },
		{ id: 2, name: "植保部" },
		{ id: 3, name: "行政部" },
		{ id: 4, name: "电商部" },
		{ id: 5, name: "信息部" },
	];

	const uploadSuccess = (file) => {
		tform.imgUrl = file.data;
		ElMessage.success(file.message);
	};
	const handleError = () => {
		ElMessage.error("上传失败");
	};
	const getNub = () => {
		getObj("/codeNum").then((res) => {
			tform.num = res.data.data;
		});
	};
	const deleteIcon = () => {
		delObj("/delePic", { src: tform.imgUrl }).then(() => {
			tform.imgUrl = "";
		});
	};
	const submitForm = (formEl) => {
		if (!formEl) return;
		formEl.validate((valid) => {
			if (valid) {
				console.log("submit!");
				// if (!submitForm.imgUrl) return;
			} else {
				console.log("error submit!");
			}
		});
	};
</script>

<style lang="scss" scoped>
	#typeIn {
		.el-form {
			.sysNum :deep(.el-input__inner) {
				cursor: pointer;
				text-align: left;
				color: #a8abb2;
			}
			.upload {
				position: relative;
				.el-icon,
				img {
					min-width: 7.2rem;
					max-width: 10.1rem;
					height: 7.2rem;
					border-radius: 0.2rem;
					background-color: #eee;
					color: #666;
				}
				.del {
					width: 1rem;
					position: absolute;
					top: 0;
					right: 0;
					color: red;
					cursor: pointer;
				}
			}
		}
	}
</style>
